<template>
  <div>
    <AD></AD>
    <div class="header">
      <router-link to="/city" class="city">城市</router-link>
      <router-link to="/index/movies/hotShow" class="hotshowing">正在热映</router-link>
      <router-link to="/index/movies/commingSoon" class="soon">即将上映</router-link>
      <router-link to="/search" class="search">搜索</router-link>
    </div>
    <router-view></router-view>
  </div>
</template>

<script>
import AD from '../../components/Ad.vue'
export default {
  components:{
    AD
  }
}
</script>

<style lang="scss" scoped >
@import 'assets/style/mixin.scss';
.header{
  @include border_1px(#e8e8e8);
  display: flex;
  align-items: center;
  justify-content: center;
  height: 45px;
  text-align: center;
  .city{
    flex: 70;
  }
  .hotshowing,
  .soon{
    flex: 80;
  }
  .search{
    flex: 70;
  }
  .router-link-exact-active{
    font-weight: 700;
    font-size: 1.1rem;
    position: relative;
  }
  .router-link-exact-active::after{
    position: absolute;
    bottom: -10px;
    left: 33%;
    content: '';
    background-color: red;
    height: 3px;
    width: 35%;
  }
}
</style>